import { PureComponent } from "react";
import { Button, Modal,ActivityIndicator,InputItem,Carousel,NavBar } from "antd-mobile"
import { connect } from 'dva';
import { handleImg, goToPage,isNull,handleOSS } from "../../utils/helper";
import MToast from '../../components/Util/MToast';
@connect(() => {
  return ({

  })
})
export default class GoodsDetail extends PureComponent{
  constructor(props){
    super(props);
    this.state = {
      carouselDetailItem:[],
      loading:true,
      goodsDetailItem:[],
      goodsImage:[]

    }
  }
  componentWillMount(){
    let {dispatch,location} = this.props;
    const query = location.search;
    console.log(query)
    const arr = query.split('&') // ['?s=', 'f=7']
    const goods_id = arr[0].substr(4) // '1'
    const store_id = arr[1].substr(9) // '7'
    localStorage.setItem("store_id",store_id)
    console.log(goods_id,store_id)
    dispatch({
      type: "global/setHeaderTitle",
      payload: {
        title: T(""),
        path: location.pathname + location.search
      }
    });
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "qry/all?_c=goods_banner_list",
          params: [
            {
              key: "id",
              value: goods_id
            },
            {
              key: "store_id",
              value: store_id
            }
          ],
          _c: "goods_banner_list"
        },
        callback: (result) => {
          let { data } = result;
          console.log(data);
          this.setState({
            carouselDetailItem:data
          })

        }
      }
    });
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "qry/row?_c=app_goods_detail",
          params: [
            {
              key: "id",
              value: goods_id
            },
            {
              key: "store_id",
              value: store_id
            }
          ],
          _c: "app_goods_detail"
        },
        callback: (result) => {
          let { data } = result;
          console.log(data.img_url.split(","));
          this.setState({
            goodsDetailItem:data,
            goodsImage:data.img_url.split(",")
          })


        }
      }
    });

  }
  renderListImg() {
    let { goodsImage} = this.state;


    if (!goodsImage || goodsImage.length == 0) {
      return (
        <div style={{ padding: "40px 0", textAlign: "center", fontSize: "20px", color: "#555" }}>
          {T("No products(暂无商品)")}
        </div>
      )
    }
    else {
      let contents = [];
      return (
        <div>
            {goodsImage.map((i,k)=>(
              <img src={handleOSS(i)} style={{width:'100%',marginBottom:'10px'}}/>
            ))}

        </div>
      )
    }
  }
  handleAdd=(e,i)=>{
    // console.log(i);
    let {dispatch} = this.props;
    dispatch({
      type: "form/query",
      payload: {
        apiInfo: {
          url: "cart/add",
          params: [
            {
              key: "goods_id",
              value: i.id
            },
            {
              key: "goods_name",
              value: i.goods_name
            },
            {
              key: "img_url",
              value: i.img_url
            },
            {
              key: "price",
              value: i.price
            },
            {
              key: "quantity",
              value: 1
            }
          ]
        },
        callback: (result) => {
          let { data } = result;
          console.log(data)
          MToast.info(T("È stato aggiunto un nuovo articolo al tuo carrello.（商品已加入到购物车）",3, null, false));

        }
      }
    })
  }

  render(){
    let {dispatch} = this.props;
    let {cartItems,loading,modal2,currentQuantity,modal3,currentItem_id,carouselDetailItem,goodsDetailItem,goodsImage} = this.state;
    console.log(goodsImage)
    return(
      <div style={{height:"100%",position: 'relative',height:'100%',fontFamily:"Roboto",background:'#fff',}}>
        <div style={{paddingTop:"13%"}}>
          <Carousel
            autoplay={true}
            infinite
            autoplayInterval={10000}
            speed={400}
            beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
            afterChange={index => console.log('slide to', index)}
          >
            {this.state.carouselDetailItem.map((i,k) => (
              <a
                key={k}
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
              >
                <img
                  src={handleOSS(i.url)}
                  alt=""
                  style={{ width: '100%', verticalAlign: 'top',height:'auto' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </a>
            ))}
          </Carousel>
        </div>

        <div style={{margin:'0 16px'}}>
          <p style={{margin:'16px 0px 13px',color:'#2E2D35',fontSize:'14px',width:'100%'}} className="ellipsis2">{goodsDetailItem.goods_name}</p>
          <p style={{fontWeight:'bold',fontSize:'20px',color:'#F09600',marginBottom:'10px'}}>€{goodsDetailItem.price}</p>
        </div>
        <div style={{background:'#F3F3F5',padding:'11px 16px',fontSize:'11px',fontWeight:'bold',color:'#9C9BAB'}}>PRODUCT DESCRIPTION</div>
        <div style={{margin:'20px 16px',overflow:'hidden'}}>
          <div style={{color:'#9C9BAB',fontSize:'12px',float:'left',width:'25%',textAlign:'left'}}>
            <div>Marchi</div>
            <div>品牌</div>
          </div>
          <div style={{color:'#595867',fontSize:'14px',float:'left',paddingBottom:'16px',borderBottom:'1px solid #F3F3F5',width:'65%',height:'39px'}}>{goodsDetailItem.brand_name}</div>
        </div>
        <div style={{margin:'20px 16px',overflow:'hidden'}}>
          <div style={{color:'#9C9BAB',fontSize:'1,2em',float:'left',width:'25%',textAlign:'left'}}>
            <div>Codice a barre</div>
            <div>条码</div>
          </div>
          <div style={{color:'#595867',fontSize:'14px',float:'left',paddingBottom:'16px',borderBottom:'1px solid #F3F3F5',width:'65%',height:'39px'}}>{goodsDetailItem.barcode}</div>
        </div>
        <div style={{margin:'20px 16px',overflow:'hidden'}}>
          <div style={{color:'#9C9BAB',fontSize:'12px',float:'left',width:'25%',textAlign:'left'}}>
            <div>Specs</div>
            <div>规格</div>
          </div>
          <div style={{color:'#595867',fontSize:'14px',float:'left',paddingBottom:'16px',borderBottom:'1px solid #F3F3F5',width:'65%',height:'39px'}}>{goodsDetailItem.spec_num}</div>
        </div>
        <div style={{margin:'20px 16px',overflow:'hidden'}}>
          <div style={{color:'#9C9BAB',fontSize:'12px',float:'left',width:'25%',textAlign:'left'}}>
            <div>Unità</div>
            <div>单位</div>
          </div>
          <div style={{color:'#595867',fontSize:'14px',float:'left',paddingBottom:'16px',width:'65%',height:'39px'}}>{goodsDetailItem.unit}</div>
        </div>
        <div style={{width:'100%',marginBottom:'20%'}}>
          {this.renderListImg()}

        </div>
        <div style={{position:'fixed',bottom:'0px',left:'0px',width:'100%',background:'#fff'}}>
          <div style={{marginTop:'8px'}}>
            <img src="image/pep.png" style={{width:'50px',height:'50px',position:'absolute',left:'10%',top:'12%'}} onClick={()=>{goToPage({ dispatch, config: { url: "/chat" }})}}/>
            <img src="image/cart10.png" style={{width:'50px',height:'50px',position:'absolute',left:'25%',top:'12%'}} onClick={()=>{goToPage({ dispatch, config: { url: "/goodcart" }})}}/>
            <Button type="primary" size="default" style={{display:'inline-block',width:'50%',marginLeft:'45%',fontSize:'14px',borderRadius:'15px',background:'#F09600',border:'0px'}} onClick={(e) => {this.handleAdd(e,goodsDetailItem) }}>+Aggiungi al carrello 加购</Button></div>
        </div>

      </div>
    )
  }
}
